<!-- 分类 -->
<template>
	<view class="category-box">
		<three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory>
		<two-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 3"></two-catgory>
		<one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory>
		<takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory>
	</view>
</template>

<script>
import takeoutCatgory from './components/takeout-catgory.vue';
import threeCatgory from './components/three-catgory.vue';
import twoCatgory from './components/two-catgory.vue';
import oneCatgory from './components/one-catgory.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import data from '@/data/category/index.js'
export default {
	components: {
		takeoutCatgory,
		threeCatgory,
		twoCatgory,
		oneCatgory
	},
	data() {
		return {
			categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
			categoryStyleId: 0 //分类Id
		};
	},
	computed: {
		...mapGetters(['authType'])
	},
	async onLoad() {
		const data1 = await data.getCategory()
		this.categoryType = Number(data1.type);
		this.categoryStyleId = Number(data1.id);
		console.log(this.categoryType);
		console.log(this.categoryStyleId);
		uni.setNavigationBarTitle({
			title: data1?.name
		});
	},
};
</script>

<style lang="scss">
.category-box {
	height: 100%;
	flex: 1;
	overflow: hidden;
}
</style>
